<template>
  <view class="product-publish-page">
    <view class="form-container">
      <!-- 商品图片上传 -->
      <view class="form-section">
        <view class="section-title required">商品图片</view>
        <view class="upload-section">
          <view class="image-list">
            <view 
              class="upload-item" 
              v-for="(image, index) in formData.images" 
              :key="index"
            >
              <image class="uploaded-image" :src="image" mode="aspectFill" />
              <view class="delete-btn" @click.stop="deleteImage(index)">
                <text class="iconfont-v2 icon-close"></text>
              </view>
            </view>
            <view 
              class="upload-placeholder" 
              v-if="formData.images.length < 9"
              @click="uploadImage"
            >
              <text class="iconfont icon-icon25201 upload-icon"></text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
          <view class="upload-tip">最多上传9张图片，第一张为主图</view>
        </view>
      </view>

      <!-- 商品标题 -->
      <view class="form-section">
        <view class="section-title required">商品标题</view>
        <input 
          class="form-input" 
          type="text" 
          placeholder="请输入商品标题" 
          v-model="formData.title"
          maxlength="50"
        />
      </view>

      <!-- 商品分类 -->
      <view class="form-section">
        <view class="section-title required">商品分类</view>
        <view class="picker-wrapper" @click="openCategoryPicker">
          <input 
            class="form-input" 
            type="text" 
            placeholder="请选择商品分类" 
            v-model="categoryName"
            readonly
            disabled
          />
          <text class="iconfont icon-ic_rightarrow picker-arrow"></text>
        </view>
      </view>

      <!-- 价格设置 -->
      <view class="form-section">
        <view class="section-title required">价格设置</view>
        <view class="price-group">
          <view class="price-item">
            <view class="price-label">现价</view>
            <view class="price-input-wrapper">
              <text class="price-symbol">¥</text>
              <input 
                class="form-input price-input" 
                type="digit" 
                placeholder="0.00" 
                v-model="formData.currentPrice"
              />
            </view>
          </view>
          <view class="price-item">
            <view class="price-label">原价</view>
            <view class="price-input-wrapper">
              <text class="price-symbol">¥</text>
              <input 
                class="form-input price-input" 
                type="digit" 
                placeholder="0.00" 
                v-model="formData.originalPrice"
              />
            </view>
          </view>
        </view>
      </view>

      <!-- 库存设置 -->
      <view class="form-section">
        <view class="section-title required">库存数量</view>
        <input 
          class="form-input" 
          type="number" 
          placeholder="请输入库存数量" 
          v-model.number="formData.stock"
        />
      </view>

      <!-- 商品描述 -->
      <view class="form-section">
        <view class="section-title required">商品描述</view>
        <textarea 
          class="form-textarea" 
          placeholder="请输入商品详细描述，包括商品特点、规格、使用方法等"
          v-model="formData.description"
          maxlength="1000"
        />
        <view class="char-count">{{ formData.description.length }}/1000</view>
      </view>

      <!-- 服务保障 -->
      <view class="form-section">
        <view class="section-title">服务保障</view>
        <view class="service-list">
          <view 
            class="service-item" 
            v-for="(service, index) in serviceOptions" 
            :key="index"
            @click="toggleService(index)"
          >
            <view class="service-checkbox" :class="{ active: service.selected }">
              <text v-if="service.selected" class="iconfont-v2 icon-dagou"></text>
            </view>
            <text class="service-text">{{ service.name }}</text>
          </view>
        </view>
      </view>

      <!-- 商品标签 -->
      <view class="form-section">
        <view class="section-title">商品标签</view>
        <view class="tag-list">
          <view 
            class="tag-item" 
            v-for="(tag, index) in tagOptions" 
            :key="index"
            :class="{ active: tag.selected }"
            @click="toggleTag(index)"
          >
            <text>{{ tag.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部发布按钮 -->
    <view class="bottom-action-bar">
      <button class="publish-btn" @click="publishProduct">发布商品</button>
    </view>

    <!-- 分类选择器 -->
    <u-picker 
      :show="showCategoryPicker" 
      :columns="categoryColumns" 
      keyName="name"
      @confirm="confirmCategory"
      @cancel="showCategoryPicker = false"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        images: [],
        title: '',
        categoryId: 0,
        currentPrice: '',
        originalPrice: '',
        stock: 0,
        description: '',
        services: [],
        tags: []
      },
      categoryName: '',
      showCategoryPicker: false,
      categoryList: [
        { id: 1, name: '日用百货' },
        { id: 2, name: '食品饮料' },
        { id: 3, name: '服装鞋帽' },
        { id: 4, name: '数码电器' },
        { id: 5, name: '美妆护肤' },
        { id: 6, name: '母婴用品' },
        { id: 7, name: '运动户外' },
        { id: 8, name: '图书文具' }
      ],
      serviceOptions: [
        { name: '捣蛋熊发货&售后', selected: false },
        { name: '极速退款', selected: false },
        { name: '极速达', selected: false },
        { name: '满99元包邮', selected: false }
      ],
      tagOptions: [
        { name: '特价商品', selected: false },
        { name: '包邮', selected: false },
        { name: '新品', selected: false },
        { name: '热销', selected: false }
      ]
    }
  },
  computed: {
    categoryColumns() {
      return [this.categoryList];
    }
  },
  methods: {
    // 上传图片
    uploadImage() {
      const maxCount = 9 - this.formData.images.length;
      uni.chooseImage({
        count: maxCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          // 这里应该上传到服务器，暂时使用本地路径
          this.formData.images = this.formData.images.concat(tempFilePaths);
          console.log('选择的图片:', tempFilePaths);
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 删除图片
    deleteImage(index) {
      this.formData.images.splice(index, 1);
    },
    
    // 打开分类选择器
    openCategoryPicker() {
      this.showCategoryPicker = true;
    },
    
    // 确认分类选择
    confirmCategory(e) {
      const idx = (e.indexs && e.indexs[0]) || 0;
      const item = this.categoryList[idx];
      if (item) {
        this.formData.categoryId = item.id;
        this.categoryName = item.name;
      }
      this.showCategoryPicker = false;
    },
    
    // 切换服务保障
    toggleService(index) {
      this.serviceOptions[index].selected = !this.serviceOptions[index].selected;
      this.updateServices();
    },
    
    // 更新服务保障数组
    updateServices() {
      this.formData.services = this.serviceOptions
        .filter(service => service.selected)
        .map(service => service.name);
    },
    
    // 切换标签
    toggleTag(index) {
      this.tagOptions[index].selected = !this.tagOptions[index].selected;
      this.updateTags();
    },
    
    // 更新标签数组
    updateTags() {
      this.formData.tags = this.tagOptions
        .filter(tag => tag.selected)
        .map(tag => tag.name);
    },
    
    // 验证表单
    validateForm() {
      if (this.formData.images.length === 0) {
        uni.showToast({
          title: '请上传商品图片',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.title.trim()) {
        uni.showToast({
          title: '请输入商品标题',
          icon: 'none'
        });
        return false;
      }
      
      if (this.formData.categoryId === 0) {
        uni.showToast({
          title: '请选择商品分类',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.currentPrice || parseFloat(this.formData.currentPrice) <= 0) {
        uni.showToast({
          title: '请输入有效的现价',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.stock || this.formData.stock <= 0) {
        uni.showToast({
          title: '请输入有效的库存数量',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.description.trim()) {
        uni.showToast({
          title: '请输入商品描述',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    // 发布商品
    publishProduct() {
      if (!this.validateForm()) {
        return;
      }
      
      console.log('发布商品数据:', this.formData);
      
      // 这里应该调用API提交数据
      uni.showLoading({
        title: '发布中...'
      });
      
      // 模拟API调用
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '商品发布成功！',
          icon: 'success',
          duration: 2000
        });
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      }, 1500);
    }
  }
}
</script>

<style lang="scss" scoped>
.product-publish-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 160rpx;
}

.form-container {
  padding: 0 0 40rpx;
}

.form-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 40rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    
    &.required::before {
      content: '* ';
      color: #ED6567;
    }
  }
  
  .form-input {
    width: 100%;
    height: 88rpx;
    padding: 0 24rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
  }
  
  .form-textarea {
    width: 100%;
    min-height: 200rpx;
    padding: 24rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
  }
  
  .char-count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 12rpx;
  }
}

// 图片上传区域
.upload-section {
  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .upload-item {
      position: relative;
      width: 200rpx;
      height: 200rpx;
      border-radius: 12rpx;
      overflow: hidden;
      
      .uploaded-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .delete-btn {
        position: absolute;
        top: 8rpx;
        right: 8rpx;
        width: 48rpx;
        height: 48rpx;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont-v2 {
          font-size: 24rpx;
          color: white;
        }
      }
    }
    
    .upload-placeholder {
      width: 200rpx;
      height: 200rpx;
      background: #f8f9fa;
      border: 2rpx dashed #ddd;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      
      .upload-icon {
        font-size: 48rpx;
        color: #999;
      }
      
      .upload-text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .upload-tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
  }
}

// 分类选择器
.picker-wrapper {
  position: relative;
  
  .form-input {
    padding-right: 60rpx;
  }
  
  .picker-arrow {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28rpx;
    color: #999;
    pointer-events: none;
  }
}

// 价格设置
.price-group {
  display: flex;
  gap: 30rpx;
  
  .price-item {
    flex: 1;
    
    .price-label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
    }
    
    .price-input-wrapper {
      display: flex;
      align-items: center;
      background: #f8f9fa;
      border-radius: 12rpx;
      padding: 0 24rpx;
      height: 88rpx;
      
      .price-symbol {
        font-size: 32rpx;
        color: #333;
        margin-right: 8rpx;
      }
      
      .price-input {
        flex: 1;
        background: transparent;
        padding: 0;
        height: auto;
      }
    }
  }
}

// 服务保障
.service-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  
  .service-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    
    .service-checkbox {
      width: 40rpx;
      height: 40rpx;
      border: 2rpx solid #ddd;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &.active {
        background: #ED6567;
        border-color: #ED6567;
        
        .iconfont-v2 {
          font-size: 24rpx;
          color: white;
        }
      }
    }
    
    .service-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

// 标签
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .tag-item {
    padding: 12rpx 24rpx;
    background: #f8f9fa;
    border: 2rpx solid #ddd;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.2s ease;
    
    &.active {
      background: #ffe6e6;
      border-color: #ED6567;
      color: #ED6567;
    }
  }
}

// 底部操作栏
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 30rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  
  .publish-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
}
</style>

